<script>
    // 省市区级联组件
    import { queryRegion } from '@/api/base';
    export default {
        name: 'ZkArea',
        props: {
            value: {
                type: [Array],
                default: null
            },
            disabled: {
                type: Boolean,
                default: false
            },
            placeholder: {
                type: [String, Object]
            }
        },
        data() {
            return {
                optionsData: []
            }
        },
        async created() {
            const res = await queryRegion({ parentCode: 0 }) || [];
            let provinceList = res.map(i => ({ value: i.areaCode, label: i.areaName, isLeaf: false }));
            let regionList;
            let cityList;
            if (this.value) {
                if (this.value.length > 2) {
                    const res = await queryRegion({ parentCode: this.value[0] }) || [];
                    cityList = res.map(i => ({ value: i.areaCode, label: i.areaName, isLeaf: false }));
                    const res1 = await queryRegion({ parentCode: this.value[1] }) || [];
                    regionList = res1.map(i => ({ value: i.areaCode, label: i.areaName, isLeaf: true }));
                    const item1 = cityList.find(i=>i.value==this.value[1]);
                    if(item1)item1.children = regionList;
                    const item = provinceList.find(i=>i.value==this.value[0]);
                    if(item)item.children = cityList;
                }
            }
            this.optionsData = provinceList;
    },
    render(){
        const props = Object.keys(this.$props).reduce((res, key) => {
            res[key] = this[key];
            return res;
        }, {});

        // props.value = formatVal(props.value);
        // delete props.option;
        // props.options = this.optionsData.map(i=>{
        //     i.value = formatVal(i.value);
        //     return i;
        // });

        const onChange = (value, option) => {
            if (value == 'null') {
                value = null;
            }
            console.log(value, option);
            this.$emit('input', value, option);
            this.$listeners.change && this.$listeners.change();
        }
        return (
            <a-cascader {...{ props }} style="width: 100%" options={this.optionsData} loadData={(selectedOptions) => this.loadData(selectedOptions)} onChange={onChange} />
        )
    },
    methods: {
        loadData(selectedOptions) {
            const targetOption = selectedOptions[selectedOptions.length - 1];
            targetOption.loading = true;
            return queryRegion({
                parentCode: targetOption.value
            }).then((result) => {
                targetOption.children = result.map(i => ({ value: i.areaCode, label: i.areaName, isLeaf: selectedOptions.length >= 2 ? true : false }));
                this.optionsData = [...this.optionsData];
                targetOption.loading = false;
            })
        }
    }
}
</script>